<template>
  <div class="login">
    <el-form :model="loginInfo" :rules="rules" ref="ruleForm" class="demo-ruleForm login-container">
      <div class="img-box">
        <img src="../assets/logo.png" alt />
      </div>
      <el-form-item prop="username" style="margin-top:30px;">
        <el-input prefix-icon="el-icon-s-custom" v-model="loginInfo.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input prefix-icon="iconfont icon-password" v-model="loginInfo.password"></el-input>
      </el-form-item>
      <el-form-item style class="btn-area">
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: {},
  data() {
    return {
      loginInfo: {
        username: "admin",
        password: "123456"
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate( async valid => {
        if( !valid ) return
        const {data:res} = await this.$axios.post('login',this.loginInfo)
        if( res.meta.status !== 200 ) return this.$message.error('登录失败')
        this.$message.success('登录成功')
        console.log(res)
        window.sessionStorage.setItem('token',res.data.token)
        this.$router.push('/backHome')
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {}
};
</script> 
<style scoped>
.login {
  height: 100%;
  background: #111360;
}
.login-container {
  box-sizing: border-box;
  padding: 0 20px;
  padding-top: 110;
  width: 450px;
  height: 300px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
}
.btn-area {
  display: flex;
  justify-content: flex-end;
}
.img-box {
  width: 130px;
  height: 130px;
  border: 1px solid #000;
  margin: 0 auto;
  margin-top: -65px;
  border-radius: 50%;
  border: 1px solid #eee;
  overflow: hidden;
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 10px #ddd;
}
img {
  width: 100%;
  height: 100%;
}
</style>
